<template>
  <div class="my-activities">
    <div class="page-header">
      <h1>我的活动</h1>
      <p>查看和管理你参与的活动</p>
    </div>
    
    <!-- 活动状态筛选 -->
    <div class="filter-section">
      <el-card>
        <el-radio-group v-model="activeStatus" @change="handleStatusChange">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="upcoming">即将开始</el-radio-button>
          <el-radio-button label="ongoing">进行中</el-radio-button>
          <el-radio-button label="completed">已结束</el-radio-button>
        </el-radio-group>
      </el-card>
    </div>
    
    <!-- 活动列表 -->
    <div class="activities-section">
      <el-timeline>
        <el-timeline-item
          v-for="activity in filteredActivities"
          :key="activity.id"
          :timestamp="formatDateTime(activity.start_time)"
          :type="getTimelineType(activity.status)"
        >
          <el-card class="activity-card">
            <div class="activity-header">
              <h3 class="activity-title">{{ activity.title }}</h3>
              <el-tag
                :type="getStatusType(activity.status)"
                size="small"
              >
                {{ getStatusText(activity.status) }}
              </el-tag>
            </div>
            
            <div class="activity-content">
              <p class="activity-description">{{ activity.content }}</p>
              
              <div class="activity-info">
                <div class="info-row">
                  <span class="info-label">主办社团：</span>
                  <span class="info-value">{{ activity.club_name }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">活动地点：</span>
                  <span class="info-value">{{ activity.location || '待定' }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">参与人数：</span>
                  <span class="info-value">{{ activity.participant_count }}/{{ activity.max_participants || '不限' }}人</span>
                </div>
                <div class="info-row">
                  <span class="info-label">报名时间：</span>
                  <span class="info-value">{{ formatDateTime(activity.signup_time) }}</span>
                </div>
              </div>
            </div>
            
            <div class="activity-actions">
              <el-button
                v-if="activity.status === 0"
                type="primary"
                @click="handleViewActivity(activity.id)"
              >
                查看详情
              </el-button>
              <el-button
                v-if="activity.status === 0"
                type="danger"
                @click="handleCancelSignup(activity.id)"
              >
                取消报名
              </el-button>
              <el-button
                v-if="activity.status === 1"
                type="success"
                @click="handleViewActivity(activity.id)"
              >
                参与活动
              </el-button>
              <el-button
                v-if="activity.status === 2"
                @click="handleViewActivity(activity.id)"
              >
                查看回顾
              </el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    
    <!-- 空状态 -->
    <div v-if="filteredActivities.length === 0" class="empty-state">
      <el-empty description="暂无相关活动">
        <el-button type="primary" @click="goToActivityCenter">
          去发现活动
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'MyActivities',
  setup() {
    const router = useRouter()
    
    const activeStatus = ref('all')
    
    const myActivities = ref([
      {
        id: 1,
        title: '校园摄影大赛',
        content: '展示你的摄影才华，记录校园美好瞬间',
        club_name: '摄影社团',
        location: '艺术楼展厅',
        start_time: '2024-01-20 14:00:00',
        max_participants: 50,
        participant_count: 23,
        status: 0, // 0: 未开始, 1: 进行中, 2: 已结束
        signup_time: '2024-01-15 10:30:00'
      },
      {
        id: 2,
        title: '篮球友谊赛',
        content: '与其他学校进行篮球友谊赛，增进交流',
        club_name: '篮球社团',
        location: '体育馆',
        start_time: '2024-01-18 15:00:00',
        max_participants: 20,
        participant_count: 18,
        status: 1,
        signup_time: '2024-01-10 16:20:00'
      },
      {
        id: 3,
        title: '编程技术分享会',
        content: '分享最新的编程技术和开发经验',
        club_name: '编程社团',
        location: '计算机楼201',
        start_time: '2024-01-15 19:00:00',
        max_participants: 100,
        participant_count: 45,
        status: 2,
        signup_time: '2024-01-12 14:00:00'
      }
    ])
    
    const filteredActivities = computed(() => {
      if (activeStatus.value === 'all') {
        return myActivities.value
      }
      
      const statusMap = {
        upcoming: 0,
        ongoing: 1,
        completed: 2
      }
      
      return myActivities.value.filter(
        activity => activity.status === statusMap[activeStatus.value]
      )
    })
    
    const getStatusType = (status) => {
      const typeMap = {
        0: 'primary',
        1: 'success',
        2: 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const textMap = {
        0: '未开始',
        1: '进行中',
        2: '已结束'
      }
      return textMap[status] || '未知'
    }
    
    const getTimelineType = (status) => {
      const typeMap = {
        0: 'primary',
        1: 'success',
        2: 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const formatDateTime = (dateTime) => {
      if (!dateTime) return '待定'
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    
    const handleStatusChange = () => {
      // 状态改变时的处理
    }
    
    const handleViewActivity = (activityId) => {
      console.log('查看活动详情:', activityId)
      // 跳转到活动详情页面
    }
    
    const handleCancelSignup = async (activityId) => {
      try {
        await ElMessageBox.confirm(
          '确定要取消报名吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        // 这里实现取消报名逻辑
        ElMessage.success('已取消报名')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('操作失败')
        }
      }
    }
    
    const goToActivityCenter = () => {
      router.push('/discovery/activity-center')
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      activeStatus,
      myActivities,
      filteredActivities,
      getStatusType,
      getStatusText,
      getTimelineType,
      formatDateTime,
      handleStatusChange,
      handleViewActivity,
      handleCancelSignup,
      goToActivityCenter
    }
  }
}
</script>

<style lang="scss" scoped>
.my-activities {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .filter-section {
    margin-bottom: 24px;
  }

  .activities-section {
    .activity-card {
      .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .activity-title {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
        }
      }

      .activity-content {
        .activity-description {
          margin: 0 0 16px;
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
        }

        .activity-info {
          .info-row {
            display: flex;
            margin-bottom: 8px;
            font-size: 13px;

            &:last-child {
              margin-bottom: 0;
            }

            .info-label {
              color: #909399;
              width: 80px;
              flex-shrink: 0;
            }

            .info-value {
              color: #606266;
            }
          }
        }
      }

      .activity-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 0;
  }
}
</style>
